<html>
<head>
    <title>设备管理</title>
    <link rel="stylesheet" href="../../../assets/bundle.element.css">
    <link rel="stylesheet" href="../../../style.css">
    <style>
        body{
            background: #F2F2F2;
        }

        .chart-outer{
            height: 200px;
        }
        .el-input__inner{
            /*width: 280px;*/
           margin-left: 20px;
        }
        .el-transfer-panel{
            width: 300px;
        }
    </style>
</head>
<body>
<div class="page" id="page-elesafe">
    <div class="page-title">设备管理 › 运维人员</div>
    <div class="page-main">
        <el-tabs v-model="tabName" @tab-click="handleClick">
            <el-tab-pane label="运维人员" name="first">
                <el-row>
                    <el-col :span="24">
                        <!--<div class="main-head">-->
                        <el-card style="margin-bottom: 20px;height: 100px">
                            <el-form :inline="true">
                                <el-form-item label="">
                                    <el-input  placeholder="请输入设备名称关键字" style="width: 280px"></el-input>
                                </el-form-item>
                                <el-form-item style="padding-left: 30px">
                                    <el-button  @click="search" style="background-color: #578BBB;color: white" >查询</el-button>
                                </el-form-item>
                                <div style="float: right">
                                <el-form-item>
                                    <el-button  @click="addClick" style="background-color: #5DDBDD;color: white ">新增</el-button>
                                </el-form-item>
                                <el-form-item>
                                    <el-button  @click="exportInfo" style="background-color: #5DDBDD;color: white ">导出</el-button>
                                </el-form-item>
                                </div>
                            </el-form>
                        </el-card>
                        <!--</div>-->
                        <el-card>
                        <el-table border stripe style="width: 100%" :data="videoData" >
                            <el-table-column prop="name" label="编号" align="center" width="80px">
                            </el-table-column>
                            <el-table-column prop="value" label="姓名" align="center" width="80px">
                            </el-table-column>
                            <el-table-column prop="value" label="公司" align="center">
                            </el-table-column>
                            <el-table-column prop="value" label="性别" align="center" width="80px">
                            </el-table-column>

                            <el-table-column prop="value" label="职位" align="center" width="80px">
                            </el-table-column>
                            <el-table-column prop="value" label="部门" align="center">
                            </el-table-column>
                            <el-table-column prop="value" label="电话" align="center">
                            </el-table-column>
                            <el-table-column prop="value" label="报警分组" align="center">
                            </el-table-column>
                            <el-table-column prop="value" label="累计运维时间" align="center">
                            </el-table-column>
                            <el-table-column prop="value" label="累计运维次数" align="center" width="120px">
                            </el-table-column>
                            <el-table-column label="操作" align="center" width="200px" fixed="right">
                                <template slot-scope="scope">
                                    <el-button   icon="el-icon-setting"  round size="small" @click="managementClick"></el-button>
                                    <el-button @click="editClick(scope.row)" round  size="small"  icon="el-icon-edit"></el-button>
                                    <el-button   icon="el-icon-delete" round   size="small" @click="delClick"></el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        </el-card>
                    </el-col>
                </el-row>
            </el-tab-pane>
            <el-tab-pane label="报警分组" name="second">
                <el-row>
                    <el-col :span="24">
                        <!--<div class="main-head">-->
                        <el-card style="margin-bottom: 20px;height: 100px">
                            <el-form :inline="true">
                                <el-form-item label="">
                                    <el-input  placeholder="请输入设备名称关键字" style="width: 280px"></el-input>
                                </el-form-item>
                                <el-form-item style="padding-left: 30px">
                                    <el-button type="primary" @click="search" >查询</el-button>
                                </el-form-item>
                            </el-form>
                        </el-card>
                        <el-card>
                            <el-table border stripe style="width: 100%" :data="alarmData">
                                <el-table-column prop="number" label="编号" align="center" >
                                </el-table-column>
                                <el-table-column prop="group" label="报警分组名称" align="center" >
                                </el-table-column>
                                <el-table-column prop="group1" label="报警级别" align="center" >
                                </el-table-column>
                                <el-table-column prop="group2" label="指标组名称" align="center" >
                                </el-table-column>
                                <el-table-column prop="day" label="创建时间" align="center" >
                                </el-table-column>
                            </el-table>
                        </el-card>
                    </el-col>
                </el-row>
            </el-tab-pane>
        </el-tabs>
    </div>

    <el-dialog :title="editMod?'新增运维人员':'编辑运维人员'"
               :visible.sync="editFormVisible"
               center
               width="30%"
           >
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="编号" :rules="[
                             {required:true,message:'编号不能为空!',trigger:'blur'}
                            ]">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="姓名" :rules="[
                             {required:true,message:'姓名不能为空!',trigger:'blur'}
                            ]">
                <el-input v-model="form.name" ></el-input>
            </el-form-item>
            <el-form-item label="公司" prop="company" :rules="[
                              { required: true, message: '请选择公司', trigger: 'change' }
                            ]">
                <el-select v-model="form.company"  placeholder="请选择企业" style="width: 100%">
                    <el-option label="杭州开地" value="shanghai"></el-option>
                    <el-option label="利华消防" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="性别">
                <el-select v-model="form.company" placeholder="请选择性别" style="width: 100%">
                    <el-option label="男" value="man"></el-option>
                    <el-option label="女" value="woman"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="职位" >
                <el-input v-model="form.name" ></el-input>
            </el-form-item>
            <el-form-item label="部门" >
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="电话" >
                <el-input v-model="form.name" :rules="[
                             {required:true,message:'电话不能为空!',trigger:'blur'}
                            ]"></el-input>
            </el-form-item>
            <el-form-item label="报警分组">
                <el-select v-model="form.alarm" placeholder="请选择报警分组" style="width: 100%">
                    <el-option label="杭州开地" value="shanghai"></el-option>
                    <el-option label="利华消防" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="累计运维时间" style="white-space: nowrap">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="累计运维次数" style="white-space: nowrap">
                <el-input v-model="form.name" ></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitClick('form')">保存</el-button>
            <el-button @click="cancelClick('form')">取消</el-button>
        </div>
    </el-dialog>
    <el-dialog title="关联站点"
               :visible.sync="managementFormVisible"
               center
               width="48%"

        >
        <el-card>
        <el-transfer v-model="value1"
                     :data="data"
                     :titles="['未关联站点', '已关联站点']"
        ></el-transfer>
        </el-card>

    </el-dialog>
</div>


<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

<script>

    var vuePage=new Vue({
        el:'#page-elesafe',
        data(){
            const generateData = _ => {
                const data = [];
                for (let i = 1; i <= 15; i++) {
                    data.push({
                        key: i,
                        label: `备选项 ${ i }`,
                    });
                }
                return data;
            };
            return{
                data: generateData(),
                value1: [1, 4],
                formLabelWidth: '120px',
                day:'',
                tabName:'first',
                videoData:'',
                alarmData:'',
                editFormVisible:false,
                managementFormVisible:false,
                editMod:false,
                form: {
                name: '',
                company:'',
                region: '',
                date1: '',
                date2: '',
                title:'',
                type: [],
                resource: '',
                desc: '',
                alarm:''
            },
            }
        },
        methods:{
            search:function(){
             alert('查询')
            },
            handleClick:function(){
               alert('tab切换')
            },
            handleClick:function(){

            },
            aa:function(data){
            },
            addClick:function(){
                this.editMod=true;
                this.editFormVisible=true;
            },
            exportInfo:function(){

            },
            editClick(index, row){
                this.editMod=false;
                // this.videoData = row;
                this.editFormVisible=true;
            },
            managementClick(){
                this.managementFormVisible=true;
            },

            delClick() {
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            // handleClick(tab, event) {
            //     console.log(tab, event);
            // },
            cancelClick(formName){
                this.editFormVisible = false;
                this.$refs[formName].resetFields();
            },
            submitClick(formName){
                this.$refs[formName].validate((valid) =>{
                    if (valid){
                        this.$message({
                            type:'success',
                            message:'保存成功'
                        })
                    }else{
                        this.$message({
                            type:'error',
                            message:'输入内容不能为空'
                        })
                    }
                });
            },

        },
        created:function(){
            this.day = TimeUtil.convertToString(new Date());

        },
        mounted:function(){
            this.videoData=[{
                name:'杭州开地',
                value:50

            }];
            this.alarmData=[{
                number:'1',
                group:'高级运维组',
                group1:'一级报警',
                group2:'全部指标',
                day:'2018'

            },];
        }
    });


</script>

</body>
</html>
